import React from 'react'
import { Space, Table, Card, Modal, Button } from 'antd'
import SearchForm from './compontents/search.jsx'
import { useState } from 'react'
const style = (React.CSSProperties = { marginTop: '20px' })
const tableList = () => {
  const [editValues, setEditValues] = useState({})
  const [isShow, setIsShow] = useState(false)
  const editData = (record) => {
    setEditValues(record)
    setIsShow(true)
  }
  const deleteData = (record) => {
    console.log(record, '删除当前行')
  }
  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
    },
    // {
    //   title: '状态',
    //   key: 'tags',
    //   dataIndex: 'tags',
    //   render: (_, { tags }) => (
    //     <>
    //       {tags.map((tag) => {
    //         let color = tag.length > 5 ? 'geekblue' : 'green'
    //         if (tag === 'loser') {
    //           color = 'volcano'
    //         }
    //         return (
    //           <Tag color={color} key={tag}>
    //             {tag.toUpperCase()}
    //           </Tag>
    //         )
    //       })}
    //     </>
    //   ),
    // },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button type="primary" onClick={() => editData(record)}>
            编辑
          </Button>
          <Button
            type="primary"
            onClick={() => {
              Modal.confirm({
                title: 'Confirm',
                content: 'Bla bla ...',
                okText: '确认',
                cancelText: '取消',
                onOk: () => deleteData(record),
              })
            }}>
            删除
          </Button>
        </Space>
      ),
    },
  ]
  const data = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
      tags: ['loser'],
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sydney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
    },
  ]
  return (
    <>
      <Card>
        <SearchForm initialValues={editValues} isShow={isShow} />
        <div style={style}></div>
        <Table columns={columns} dataSource={data} />
      </Card>
    </>
  )
}

export default tableList
